<template>
	<view class="page">
		<uni-section class="mb-10" title="基础配置" type="line"></uni-section>
		<uni-list>
			<uni-list-item title="全局配置" note="背景图片和动画设置" clickable @click="handleGoto('config')">
				<template v-slot:header>
					<uni-icons type="gear" size="24" color="#3498db"></uni-icons>
				</template>
				<template v-slot:footer>
					<view class="list-item">
						<text class="list-right-text">管理</text>
						<uni-icons type="right" size="20" color="#9b59b6"></uni-icons>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="左侧栏" note="抽奖说明编辑" clickable @click="handleGoto('left')">
				<template v-slot:header>
					<uni-icons type="info-filled" size="24" color="#e74c3c"></uni-icons>
				</template>
				<template v-slot:footer>
					<view class="list-item">
						<text class="list-right-text">编辑</text>
						<uni-icons type="right" size="20" color="#9b59b6"></uni-icons>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="奖品列表" note="奖品编辑" clickable @click="handleGoto('center')">
				<template v-slot:header>
					<uni-icons type="shop" size="24" color="#2ecc71"></uni-icons>
				</template>
				<template v-slot:footer>
					<view class="list-item">
						<text class="list-right-text">编辑</text>
						<uni-icons type="right" size="20" color="#9b59b6"></uni-icons>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="下单管理" note="导入订单数据" clickable @click="handleGoto('right')">
				<template v-slot:header>
					<uni-icons type="gift" size="24" color="#f1c40f"></uni-icons>
				</template>
				<template v-slot:footer>
					<view class="list-item">
						<text class="list-right-text">管理</text>
						<uni-icons type="right" size="20" color="#9b59b6"></uni-icons>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<ver />
	</view>
</template>

<script setup>
	import ver from '@/components/ver.vue'
	const handleGoto = (key) => {
		const routes = {
			config: '/pages/h5/configEdit',
			left: '/pages/h5/leftEdit',
			center: '/pages/h5/listEdit',
			right: '/pages/h5/orderEdit'
		};

		if (routes[key]) {
			uni.navigateTo({
				url: routes[key]
			});
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.page {
		padding: 20rpx;

		.list-item {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.list-right-text {
				font-size: 24rpx;
				color: #666;
			}
		}

		uni-list-item {
			margin-bottom: 15rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

			&:active {
				background-color: #f0f0f0;
			}
		}
	}
</style>